<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;    /*    */
            display: block; /*    */
            height: 50px;   /*    */
            width: 50px;        /*    */
            border-radius: 10px;    /*    */
            background: #149ddb;    /*    */
            text-align: center;     /*  文字居中  */
            color: #b5cec9;             /*    */
            text-decoration: none;   /* 下划线   */
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

    /*  存在id属性的  */
        a[id]{        /* All id */
            background: darkseagreen;
        }

        a[id = first]{        /* id is first */
            background: #e58f4a;
        }


        a[class *= links]{         /* *= 是包含 ----------class包含links */
            background: #a24fff;
        }

        a[href ^= 属性]{     /* ^= 是以什么什么开头---------以属性开头*/
            background: red;
        }

        a[href $= doc]{     /* $= 以什么什么结尾   ---------  以doc结尾   */
            background: black;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="属性选择器Demo1.html0" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc"  class="links item">6</a>
    <a href="/a.pdf"  class="links item">7</a>
    <a href="/abc.pdf"  class="links item">8</a>
    <a href="abc.doc"  class="links item">9</a>
    <a href="abcd.doc" class="links item last" id="last">10</a>

    
</p>
</body>
</html>